<!--  -->
<template>
  <el-container>
    <el-main>
      <div class="meedu-main-body">
        <div class="back-bar-box mb-30">
          <div class="btn-back" @click="goBack">
            <i class="el-icon-back"></i> 返回
          </div>
          <div class="line"></div>
          <div class="name">录播分类管理</div>
        </div>
        <div class="add">
          <el-button type="primary" @click="goToAddCategory"
            >添加分类</el-button
          >
        </div>
        <div class="form">
          <el-table
            :data="courseCategory"
            style="width: 100%; margin-bottom: 20px"
            row-key="id"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          >
            <el-table-column prop="id" label="ID" min-width="150">
            </el-table-column>
            <el-table-column prop="sort" label="升序" min-width="150">
            </el-table-column>
            <el-table-column prop="name" label="分类名" min-width="510">
            </el-table-column>
            <el-table-column prop="" label="显示" min-width="150">
              <template>
                <div>否</div>
              </template>
            </el-table-column>
            <el-table-column prop="handle" label="操作" min-width="160">
              <template slot-scope="scope">
                <el-link type="primary" class="edit" @click="edit(scope.row.id)"
                  >编辑</el-link
                >
                <el-link type="danger" @click="deleteCategory(scope.row.id)"
                  >删除</el-link
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </el-main>
    <!-- <el-footer>Footer</el-footer> -->
  </el-container>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { courseCategory } from "@/network/course";
import http from "@/network/http.js";
import { Loading } from "element-ui";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      currentPage: 1,
      page: 1,
      size: 10,
      total: 1,
      courseCategory: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    goBack: function () {
      this.$router.push({
        path: "/course/vod/index",
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val;
      this.getCourseCategory();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      //   console.log(val);
      this.page = val;
      this.getCourseCategory();
    },
    getCourseCategory: function () {
      let loading = Loading.service({
        target: ".form",
      });
      courseCategory({
        params: {
          page: this.page,
          size: this.size,
        },
      }).then((res) => {
        this.courseCategory = res?.data?.data;
        this.total = res?.data?.total;
        loading.close();
      });
    },
    goToAddCategory: function () {
      this.$router.push({
        path: "/course/vod/category/create",
      });
    },
    edit: function (id) {
      this.$router.push({
        path: "/course/vod/category/update",
        query: {
          id,
        },
      });
    },
    deleteCategory: function (id) {
      this.$confirm("确认操作?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          http.delete(`/courseCategory/${id}`).then((res) => {
            // console.log(res);
            this.getCourseCategory();
          });
          this.$message({
            type: "success",
            message: "成功!",
          });
        })
        .catch(() => {});
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getCourseCategory();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang='scss'  scoped>
.el-container {
  height: 100%;
  text-align: center;
}
.el-main {
  background-color: #f1f2f9;
  padding: 20px 5px 20px 20px;
  // line-height: 200px;
  .meedu-main-body {
    width: 100%;
    height: auto;
    float: left;
    background-color: #fff;
    box-sizing: border-box;
    padding: 30px;
    border-radius: 15px;
    margin-bottom: 90px;
    box-shadow: 0 2px 4px 0 hsl(0deg 0% 40% / 5%);
    min-width: 1180px;
    .back-bar-box {
      display: flex;
      align-items: center;
      width: 100%;
      height: auto;
      float: left;
      margin-bottom: 30px;
      .btn-back {
        font-size: 14px;
        font-weight: 400;
        color: #333;
        cursor: pointer;
        i.el-icon-back {
          font-family: element-icons !important;
          // speak: none;
          font-style: normal;
          font-weight: 400;
          font-variant: normal;
          text-transform: none;
          line-height: 1;
          vertical-align: baseline;
          display: inline-block;
          -webkit-font-smoothing: antialiased;
        }
      }

      .line {
        width: 1px;
        height: 14px;
        background-color: #d8d8d8;
        margin-right: 15px;
        margin-left: 15px;
      }

      .name {
        font-size: 14px;
        font-weight: 600;
        color: #333;
      }
    }
    .add {
      margin-bottom: 30px;
      width: 100%;
      height: auto;
      float: left;
      text-align: left;
    }
    .form {
      .edit {
        margin-right: 5px;
      }
      ::v-deep .el-table th {
        background-color: rgb(241, 242, 249);
        color: #333;
      }
      ::v-deep .el-table .cell {
        color: #333;
      }
    }
  }
}
.el-footer {
  background-color: #f1f2f9;
}
</style>